<template>
	<div class="container">
		<div class="detail">
			<div class="title">
				<span class="title-text" :title="detail.projectName || '--'">{{ detail.projectName || '--' }}</span>
				<el-tag class="tag">{{ detail.projectType || '--' }}</el-tag>
				<el-tag class="tag-progress">完成进度：{{ detail.finishProgress || 0 }}% </el-tag>
			</div>
			<div class="content-flex">
				<div class="label">客户名称：</div>
				<div class="value">{{ detail.customerName || '--' }}</div>
			</div>
			<div class="content-flex">
				<div class="label">当前阶段：</div>
				<div class="value">{{ detail.currentStage || '--' }}</div>
			</div>
			<div class="content-flex">
				<div class="label">开始时间：</div>
				<div class="value">{{ detail.projectBeginTime || '--' }}</div>
			</div>
			<div class="content-flex">
				<div class="label">结束时间：</div>
				<div class="value">{{ detail.projectEndTime || '--' }}</div>
			</div>
			<div class="content-flex">
				<div class="label">是否需要领导协调：</div>
				<div class="value">{{ detail.coordinateFlag || '否' }}</div>
			</div>
			<div class="content-flex">
				<div class="label">客户负责人：</div>
				<div class="value">{{ detail.customerMgr || '--' }}</div>
			</div>
			<div class="content-flex">
				<div class="label">客户经理：</div>
				<div class="value">{{ detail.accountManager || '--' }}</div>
			</div>
			<div class="content-flex">
				<div class="label">产品责任人：</div>
				<div class="value">{{ detail.productMgr || '--' }}</div>
			</div>
			<div class="content-flex">
				<div class="label">交付经理：</div>
				<div class="value">{{ detail.deliveryMgr || '--' }}</div>
			</div>
			<div class="content-flex">
				<div class="label">合作伙伴：</div>
				<div class="value">{{ detail.partnerName || '--' }}</div>
			</div>
			<div class="content-flex">
				<div class="label">后向合同金额(万元)：</div>
				<div class="value">{{ detail.afterContractAmount || '--' }}</div>
			</div>
			<div class="content-flex">
				<div class="label">付款金额(万元)：</div>
				<div class="value">{{ detail.payAmount || '--' }}</div>
			</div>
			<div class="content-flex">
				<div class="label">时间进度：</div>
				<div class="value"> {{ detail.timeProgress ? truncateToFixed(detail.timeProgress, 1) : 0 }}%</div>
			</div>
			<div class="content-flex">
				<div class="label">进展情况：</div>
				<div class="value"><span :style="{ color: getColor(detail.taskImplementation) }">
						{{ detail.taskImplementation }}</span></div>
			</div>
			<div class="content">
				<div class="label">总体进展：</div>
				<div class="value" v-html="getTextToBr(detail.overallProgress)"></div>
			</div>
			<div class="content">
				<div class="label">本周进展：</div>
				<div class="value" v-html="getTextToBr(detail.weeklyProgress)"></div>
			</div>
			<div class="content">
				<div class="label">存在风险和问题：</div>
				<div class="value" v-html="getTextToBr(detail.currentProblem)"></div>
			</div>
			<div class="content">
				<div class="label">下游厂家：</div>
				<div class="value">{{ detail.companyName || '--' }}</div>
			</div>
			<div class="content">
				<div class="label">后向合同进展：</div>
				<div class="value">{{ detail.afterContractProgress || '--' }}</div>
			</div>
		</div>
		<!-- <el-form :inline="true" :model="formData" class="demo-form-inline">
			<el-form-item label="项目阶段">
				<el-input v-model="formData.projectStage" placeholder=""></el-input>
			</el-form-item>
			<el-form-item label="计划开始时间">
				<el-input v-model="formData.orderid" placeholder=""></el-input>
			</el-form-item>
			<el-form-item label="计划结束时间">
				<el-input v-model="formData.sort" placeholder=""></el-input>
			</el-form-item>
			<el-form-item label="完成进度">
				<el-input v-model="formData.ordersum" placeholder=""></el-input>
			</el-form-item>
			<el-form-item label="是否延期">
				<el-input v-model="formData.unfinishedordersum" placeholder=""></el-input>
			</el-form-item>
			<el-form-item label="时间">
				<el-date-picker v-model="formData.time" type="daterange" range-separator="至" value-format="yyyy-MM-dd"
					start-placeholder="开始日期" end-placeholder="结束日期">
				</el-date-picker>
			</el-form-item>
			<el-form-item label="产线类型">
				<el-select v-model="formData.status" placeholder="请选择">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="handleAdd">添加</el-button>
			</el-form-item>
		</el-form> -->
		<div class="table-list-box">
			<div class="add-btn-box">
				<el-button type="primary" @click="handleaddReportDetail">新增</el-button>
			</div>
			<!-- <div ref="gantt" class="gantt-container"></div>  -->
			<el-table :data="detail.reportDetailsList" style="width: 100%;margin-top:16px;" border class="table-box"
				v-loading="loading">
				<el-table-column align="center" label="序号" width="60">
					<template slot-scope="scope">
						{{ scope.$index + 1 }}
					</template>
				</el-table-column>
				<el-table-column align="center" label="项目阶段">
					<template slot-scope="scope">
						{{ scope.row.projectStage }}
					</template>
				</el-table-column>
				<el-table-column align="center" label="具体进展">
					<template slot-scope="scope">
						{{ scope.row.specificSituation }}
					</template>
				</el-table-column>
				<el-table-column align="center" label="计划开始时间">
					<template slot-scope="scope">
						{{ scope.row.planBeginTime }}
					</template>
				</el-table-column>
				<el-table-column align="center" label="计划结束时间">
					<template slot-scope="scope">
						{{ scope.row.planEndTime }}
					</template>
				</el-table-column>
				<el-table-column align="center" label="完成进度">
					<template slot-scope="scope">
						{{ scope.row.secondProgress || 0 }}%
					</template>
				</el-table-column>

				<el-table-column align="center" label="是否延期">
					<template slot-scope="scope">
						{{ scope.row.delayFlag }}
					</template>
				</el-table-column>
				<el-table-column align="center" label="操作" width="140">
					<template slot-scope="scope">
						<el-button type="text" @click="handleEdit(scope)">编辑</el-button>
						<el-button type="text" @click="handleDelete(scope.row.rid)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<el-dialog :visible.sync="dialogVisible" :title="dialogType === 'edit' ? '编辑' : '新增'" width="800px" top="20vh"
			:close-on-click-modal="false">
			<el-form :model="formData" label-width="100px" label-position="right" :rules="rules" ref="ruleForm">
				<el-row :gutter="20">
					<el-col :span="24">
						<el-form-item label="项目阶段" prop="projectStage">
							<el-input v-model="formData.projectStage" placeholder="请输入项目阶段" type="textarea"
								:autosize="{ minRows: 1, maxRows: 4 }" />
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="具体进展" prop="specificSituation">
							<el-input v-model="formData.specificSituation" placeholder="请输入具体进展" type="textarea"
								:autosize="{ minRows: 4, maxRows: 8 }" />
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="项目计划时间" prop="time">
							<el-date-picker v-model="formData.time" type="daterange" value-format="yyyy-MM-dd"
								start-placeholder="开始日期" end-placeholder="结束日期">
							</el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="完成进度(%)">
							<el-input-number v-model="formData.secondProgress" placeholder="请输入完成进度"
								controls-position="right" :min="0" :max="100" :precision="0" :step="1" />
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="是否延期" prop="delayFlag">
							<el-select v-model="formData.delayFlag" placeholder="请选择" clearable>
								<el-option label="是" value="是"></el-option>
								<el-option label="否" value="否"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div style="text-align:right;">
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="confirmRole">确定</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
import mixinJs from '@/mixins/mixinJs'
import {
	gantt
} from 'dhtmlx-gantt'; //引入插件
import "dhtmlx-gantt/codebase/dhtmlxgantt.css"  //引入插件样式
import moment from 'moment'
import { selectProjectReportDetails, deleteReportDetail, updateReportDetail, addReportDetail } from '@/api/api'
export default {
	name: 'gantt',
	mixins: [mixinJs],
	watch: {
		dialogVisible(val) {
			if (!val) {
				this.formData = {}
				this.$refs['ruleForm'].resetFields();
			}
		}
	},
	beforeRouteEnter(to, from, next) {
		next(vm => {
			if (to.path.indexOf('/weeklyReport/ganttDetail') > -1) {
				vm.getDetail();
			}
		});
	},
	data() {
		return {
			loading: false,
			detail: {},
			rules: {
				projectStage: [
					{ required: true, message: '请输入项目阶段', trigger: 'change' }
				],
				projectType: [
					{ required: true, message: '请选择项目类型', trigger: 'change' }
				],
			},
			formData: {},
			dialogVisible: false,
			dialogType: 'new',
			tasks: {
				data: []
			},
			list: [
				{
					id: 1,
					projectStage: '项目售前阶段',
					orderid: "123456789",
					sort: "1",
					secondProgress: '30',
					ordersum: "19",
					unfinishedordersum: "15",
					delayFlag: '是',
					planBeginTime: '2025-05-18',//开始时间
					planEndTime: '2025-05-29',//结束时间-不包含
					status: "1"
				}, {
					id: 2,
					projectStage: '项目合同签约阶段',
					orderid: "123456789",
					sort: "1",
					secondProgress: '72',
					ordersum: "9",
					unfinishedordersum: "4",
					delayFlag: '否',
					planBeginTime: '2025-05-28',//开始时间
					planEndTime: '2025-06-12',//结束时间-不包含
					status: "2"
				}, {
					id: 3,
					projectStage: '项目售中阶段',
					orderid: "123456789",
					sort: "1",
					secondProgress: '100',
					ordersum: "9",
					unfinishedordersum: "3",
					delayFlag: '否',
					planBeginTime: '2025-05-13',//开始时间
					planEndTime: '2025-05-22',//结束时间-不包含
					status: "3"
				}, {
					id: 'test4',
					projectStage: '项目售后阶段',
					orderid: "123456789",
					sort: "1",
					ordersum: "9",
					secondProgress: '87',
					unfinishedordersum: "7",
					delayFlag: '否',
					planBeginTime: '2025-05-18',//开始时间
					planEndTime: '2025-06-01',//结束时间-不包含
					status: "4"
				}
			]
		}
	},
	mounted() {
		this.getDetail()
	},
	methods: {
		getTextToBr(text) {
			return text ? text.replace(/\n/g, '<br />') : '--'
		},
		truncateToFixed(value, decimals) {
			const integerPart = Math.trunc(value || 0); // 获取整数部分
			const decimalPart = value - integerPart; // 获取小数部分
			const factor = Math.pow(10, decimals);
			const truncatedDecimalPart = decimalPart < 0 ? Math.ceil(decimalPart * factor) / factor : Math.floor(decimalPart * factor) / factor; // 根据正负选择向上或向下截断
			return integerPart + truncatedDecimalPart; // 组合整数部分和小数部分
		},
		getDetail() {
			let id = this.$route.params.id
			this.loading = true
			selectProjectReportDetails(id).then(res => {
				this.detail = res?.data?.projectReport || {}
			})
			this.loading = false
		},
		handleDelete(id) {
			this.$confirm(`确认删除当前项目阶段?`, '提示', {
				confirmButtonText: '确认',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(async () => {
					deleteReportDetail(id).then(res => {
						if (res.code === 200) {
							this.$message({
								type: 'success',
								message: '操作成功!'
							})
							this.getDetail();
						} else {
							this.$message({
								type: 'warning',
								message: res.message
							})
							this.getDetail();
						}
					})
				})
				.catch(err => { console.error(err) })
		},
		handleaddReportDetail() {
			this.formData = {}
			this.dialogType = 'new'
			this.dialogVisible = true
		},
		async handleEdit(scope) {
			// await this.getEdit(scope)
			await this.getEdit(scope.row)
		},
		getEdit(scope) {
			this.dialogType = 'edit'
			this.dialogVisible = true
			let time = scope.planBeginTime ? [scope.planBeginTime, scope.planEndTime] : []
			this.formData = { ...scope, time }
		},
		confirmRole() {
			this.$refs['ruleForm'].validate((valid) => {
				if (valid) {
					const isEdit = this.dialogType === 'edit'
					let params = {
						...this.formData,
						planBeginTime: this.formData.time && this.formData.time.length ? this.formData.time[0] : '',
						planEndTime: this.formData.time && this.formData.time.length ? this.formData.time[1] : '',
					}
					delete params.time
					let keyId = this.$route.params.id
					if (isEdit) {
						updateReportDetail({ ...params, keyId }).then(res => {
							if (res.code == 200) {
								this.dialogVisible = false
								this.getDetail()
							} else {
								this.$message({
									type: 'warning',
									message: res.msg
								})
							}
						})
					} else {
						addReportDetail({ ...params, keyId }).then(res => {
							if (res.code == 200) {
								this.dialogVisible = false
								this.getDetail()
							} else {
								this.$message({
									type: 'warning',
									message: res.msg
								})
							}
						})
					}
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		//开始时间-结束时间参数
		DateDifference: function (strDateStart, strDateEnd) {
			let begintime_ms = Date.parse(new Date(strDateStart.replace(/-/g, '/'))) //begintime 为开始时间
			let endtime_ms = Date.parse(new Date(strDateEnd.replace(/-/g, '/'))) // endtime 为结束时间
			let date3 = endtime_ms - begintime_ms //时间差的毫秒数
			let days = Math.floor(date3 / (24 * 3600 * 1000))
			return days
		},
		initData: function () {
			this.tasks.data = this.list.map(function (current, ind, arry) {//增加进度和颜色字段，前端根据状态生成
				let newObj = {}
				// if (current.status) { //存在status字段 说明非一级菜单，判断阶段的具体类型 设置不同颜色
				// 	if (current.status == 1) { //冒烟
				// 		newObj = Object.assign({}, current, {
				// 			'color': '#fcca02',
				// 			'progress': current.secondProgress / 100
				// 		})
				// 	} else if (current.status == 2) { //单元
				// 		newObj = Object.assign({}, current, {
				// 			'color': '#fec0dc',
				// 			'progress': current.secondProgress / 100
				// 		})
				// 	} else if (current.status == 3) { //回归
				// 		newObj = Object.assign({}, current, {
				// 			'color': '#62ddd4',
				// 			'progress': current.secondProgress / 100
				// 		})
				// 	} else if (current.status == 4) {
				// 		newObj = Object.assign({}, current, {
				// 			'color': '#d1a6ff',
				// 			'progress': current.secondProgress / 100
				// 		})
				// 	}
				// } else { //一级菜单是蓝色的
				// 	newObj = Object.assign({}, current, {
				// 		'color': '#5692f0',
				// 		'progress': current.secondProgress / 100
				// 	})
				// }
				if (current.delayFlag == '是') {
					newObj = Object.assign({}, current, {
						'color': '#fcca02',
						'progress': current.secondProgress / 100
					})
				} else if (current.secondProgress == '100') {
					newObj = Object.assign({}, current, {
						'color': '#24e1c0',
						'progress': current.secondProgress / 100
					})
				} else {
					newObj = Object.assign({}, current, {
						'color': '#1890ff',
						'progress': current.secondProgress / 100
					})
				}

				return newObj
			})
		},
		handleAdd() {

			//测试用例
			let obj = {
				...this.formData,
				'id': this.tasks.data.length + 1,
				planBeginTime: this.formData.time[0],
				planEndTime: this.formData.time[1]
			}

			this.list.push(obj)
			this.initData()
			// 数据解析
			gantt.parse(this.tasks)
			// 刷新数据
			gantt.refreshData();
		},
		todayMaker() {
			const date_to_str = gantt.date.date_to_str('%Y/%m/%d');
			const today = new Date();
			gantt.addMarker({
				planBeginTime: today,
				css: 'today',
				text: '今天',
				title: "今天: " + date_to_str(today)
			});

		},
	},
	// mounted() {
	// 	let id = this.$route.params.id
	// 	this.initData()
	// 	//自适应甘特图的尺寸大小, 使得在不出现滚动条的情况下, 显示全部任务
	// 	gantt.config.autosize = true
	// 	//只读模式
	// 	gantt.config.readonly = true
	// 	//是否显示左侧树表格
	// 	gantt.config.show_grid = true
	// 	//表格列设置
	// 	gantt.config.columns = [
	// 		{
	// 			name: 'index',
	// 			label: '序号',
	// 			width: '60',
	// 			template: (task) => {
	// 				return task.$index + 1
	// 			}
	// 		}, {
	// 			name: 'projectStage',
	// 			label: '项目阶段',
	// 			width: '160'
	// 		}, {
	// 			name: 'planBeginTime',
	// 			label: '计划开始时间',
	// 			width: '110'
	// 		}, {
	// 			name: 'planEndTime',
	// 			label: '计划结束时间',
	// 			width: '110',
	// 		}, {
	// 			name: 'secondProgress',
	// 			label: '完成进度',
	// 			width: '80',
	// 			template: (task) => {
	// 				return task.secondProgress + '%'
	// 			}
	// 		}, {
	// 			name: 'delayFlag',
	// 			label: '是否延期',
	// 			width: '80',
	// 		}, {
	// 			label: '操作',
	// 			width: '80',
	// 			template: (task) => {
	// 				return `<div class="edit-btn-box"><a class="edit-btn">编辑</a><a class="del-btn">删除</a></div>`
	// 			}
	// 		}]
	// 	let that = this
	// 	gantt.attachEvent("onTaskClick", function (id, e) {
	// 		let target = e.target || e.srcElement; // 获取触发事件的元素
	// 		if (target.className === 'edit-btn') { // 假设你的按钮有特定的类名
	// 			console.log('编辑', id, e)
	// 			let editItem = that.list.find(item => item.id == id);
	// 			that.handleEdit(editItem);
	// 		}
	// 		if (target.className === 'del-btn') { // 假设你的按钮有特定的类名
	// 			console.log('删除', id, e);
	// 			that.handleDelete(id);
	// 		}
	// 	});
	// 	let weekScaleTemplate = function (date) {
	// 		let dateToStr = gantt.date.date_to_str("%m %d");
	// 		let endDate = gantt.date.add(gantt.date.add(date, 1, "week"), -1, "day");
	// 		let weekNum = gantt.date.date_to_str("第 %W 周");
	// 		return weekNum(date)
	// 	};
	// 	let daysStyle = function (date) {
	// 		let dateToStr = gantt.date.date_to_str("%D");
	// 		if (dateToStr(date) == "六" || dateToStr(date) == "日") return "weekend";
	// 		return "";
	// 	};
	// 	gantt.config.subscales = [{
	// 		unit: "week",
	// 		step: 1,
	// 		template: weekScaleTemplate
	// 	},
	// 	{
	// 		unit: "day",
	// 		step: 1,
	// 		format: "%d"
	// 	}
	// 	];

	// 	gantt.plugins({
	// 		tooltip: true,
	// 		marker: true, // 时间标记
	// 	});
	// 	gantt.attachEvent("onGanttReady", function () {
	// 		let tooltips = gantt.ext.tooltips;
	// 		gantt.templates.tooltip_text = function (start, end, task) {
	// 			let txt = [
	// 				task.projectStage,
	// 				'计划开始时间：' + moment(task.planBeginTime).format('YYYY-MM-DD'),
	// 				'计划结束时间：' + moment(task.planEndTime).format('YYYY-MM-DD'),
	// 				'完成进度：' + task.secondProgress + '%',
	// 				'是否延期：' + task.delayFlag

	// 			]
	// 			return txt.join('<br>')
	// 		};


	// 	});


	// 	//设置任务条进度内容
	// 	gantt.templates.progress_text = function (start, end, task) {
	// 		return "<div style='text-align:left;color:#fff;padding-left:20px'></div>";
	// 	};

	// 	//任务条显示内容
	// 	gantt.templates.task_text = function (start, end, task) {
	// 		// return task.text + '(' + task.duration + '天)';
	// 		// return "<div style='text-align:center;color:#fff' class='line-name'>" + task.projectStage + "</div>";
	// 		return "<div style='text-align:center;color:#fff' class='line-name'>" + Math.round(task.progress * 100) + "%</div>";
	// 	}


	// 	// gantt.templates.scale_cell_class = function(date) {
	// 	//     /*if(date.getDay()== 0 || date.getDay()== 6){
	// 	//       return "weekend";
	// 	//     }*/
	// 	//     return 'weekend'
	// 	// }


	// 	//任务栏周末亮色
	// 	gantt.templates.task_cell_class = function (item, date) {
	// 		if (date.getDay() == 0 || date.getDay() == 6) {
	// 			return "weekend";
	// 		}
	// 	};


	// 	//任务条上的文字大小 以及取消border自带样式
	// 	gantt.templates.task_class = function (start, end, item) {
	// 		return item.$level == 0 ? 'firstLevelTask' : 'secondLevelTask'
	// 	}

	// 	gantt.config.layout = {
	// 		css: "gantt_container",
	// 		cols: [{
	// 			width: 680, // 设置左侧表格的总宽度，根据列宽总和进行调整
	// 			min_width: 300,

	// 			rows: [{
	// 				view: "grid",
	// 				scrollX: "gridScroll",
	// 				scrollable: true,
	// 				scrollY: "scrollVer"
	// 			},
	// 			{
	// 				view: "scrollbar",
	// 				id: "gridScroll",
	// 				group: "horizontal"
	// 			}
	// 			]
	// 		},
	// 		{
	// 			resizer: true,
	// 			width: 1
	// 		},
	// 		{
	// 			rows: [{
	// 				view: "timeline",
	// 				scrollX: "scrollHor",
	// 				scrollY: "scrollVer"
	// 			},
	// 			{
	// 				view: "scrollbar",
	// 				id: "scrollHor",
	// 				group: "horizontal"
	// 			}
	// 			]
	// 		},
	// 		{
	// 			view: "scrollbar",
	// 			id: "scrollVer"
	// 		}
	// 		]
	// 	};

	// 	//时间轴图表中，任务条形图的高度
	// 	// gantt.config.task_height = 28
	// 	//时间轴图表中，甘特图的高度
	// 	// gantt.config.row_height = 36
	// 	//时间轴图表中，如果不设置，只有行边框，区分上下的任务，设置之后带有列的边框，整个时间轴变成格子状。
	// 	gantt.config.show_task_cells = true
	// 	//当task的长度改变时，自动调整图表坐标轴区间用于适配task的长度
	// 	gantt.config.fit_tasks = true
	// 	gantt.config.min_column_width = 50;
	// 	gantt.config.auto_types = true;
	// 	gantt.config.xml_date = "%Y-%m-%d"; 
	// 	gantt.config.scale_unit = "month";
	// 	gantt.config.step = 1;
	// 	gantt.config.date_scale = "%Y年%M";
	// 	gantt.config.start_on_monday = true;
	// 	gantt.config.scale_height = 90;
	// 	gantt.config.autoscroll = true;
	// 	gantt.config.calendar_property = "planBeginTime";
	// 	gantt.config.calendar_property = "planEndTime";
	// 	gantt.config.readonly = true;
	// 	gantt.i18n.setLocale('cn');

	// 	// 初始化
	// 	gantt.init(this.$refs.gantt)
	// 	// 数据解析
	// 	gantt.parse(this.tasks)
	// 	this.todayMaker()
	// },

}
</script>
<style lang="less">
.firstLevelTask {
	border: none;

	.gantt_task_content {
		font-size: 13px;
	}
}

.secondLevelTask {
	border: none;
}

.thirdLevelTask {
	border: 2px solid #da645d;
	color: #da645d;
	background: #da645d;
}

.milestone-default {
	border: none;
	background: rgba(0, 0, 0, 0.45);
}

.milestone-unfinished {
	border: none;
	background: #5692f0;
}

.milestone-finished {
	border: none;
	background: #84bd54;
}

.milestone-canceled {
	border: none;
	background: #da645d;
}

html,
body {
	margin: 0px;
	padding: 0px;
	height: 100%;
	overflow: hidden;
}

.container {
	height: calc(100vh - 84px);
	width: 100%;
	padding: 16px;
	position: relative;
	background: #f3f6fb;
	overflow-y: auto;

	.gantt_grid_head_cell {

		font-size: 14px;
		color: #333;
	}

	.select-wrap {
		position: absolute;
		top: 25px;
		z-index: 99;
		width: 90px;
		left: 180px;

		.el-input__inner {
			border: none;
		}
	}

	.left-container {
		height: 100%;
	}

	.parent {
		.gantt_tree_icon {
			&.gantt_folder_open {
				// background-image: url(assets/gantt-icon.svg) !important;
			}

			&.gantt_folder_closed {
				// background-image: url(assets/gantt-icon-up.svg) !important;
			}
		}
	}

	.green,
	.yellow,
	.pink,
	.popular {
		.gantt_tree_icon.gantt_file {
			background: none;
			position: relative;

			&::before {
				content: "";
				width: 10px;
				height: 10px;
				border-radius: 50%;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
			}
		}
	}

	.green {
		.gantt_tree_icon.gantt_file {
			&::before {
				background: #84bd54;
			}
		}
	}

	.yellow {
		.gantt_tree_icon.gantt_file {
			&::before {
				background: #fcca02;
			}
		}
	}

	.pink {
		.gantt_tree_icon.gantt_file {
			&::before {
				background: #da645d;
			}
		}
	}

	.popular {
		.gantt_tree_icon.gantt_file {
			&::before {
				background: #d1a6ff;
			}
		}
	}

}

.left-container {
	height: 100%;
}

.gantt_task_content {
	text-align: left;
	padding-left: 10px;
}

.today_marker {
	background-color: red;
	border-color: red;
	color: white;
}

.title {
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 5px;
	position: relative;

	.title-text {
		max-width: calc(100% - 225px);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: inline-block;
	}
}

.detail {
	margin-bottom: 16px;
	overflow: hidden;
	background: #fff;
	padding: 16px;
	border-radius: 7px;
}

.content {
	display: flex;
	font-size: 14px;
	line-height: 26px;
	width: 100%;
	flex-wrap: wrap;
}

.content-flex {
	display: flex;
	font-size: 14px;
	line-height: 26px;
	margin-right: 20px;
	float: left;
	min-width: 14%;
}

.label {
	color: #333;
	min-width: 70px;
	font-weight: bold;
}

.value {
	color: #555;
}

.tag {
	margin-left: 12px;
	height: 24px;
	line-height: 22px;
	padding: 0 6px;
	position: absolute;
	font-size: 14px;
	top: 2px;
}

.add-btn-box {
	margin-bottom: 16px;
}

.table-list-box {
	background-color: #fff;
	padding: 16px;
	border-radius: 7px;
	min-height: 500px;
}

.gantt_tree_content {
	width: 100%;
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.line-name {
	width: calc(100% - 100px);
	margin-left: 50px;
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.edit-btn-box {
	a {
		margin: 0 4px;
		color: #1890ff;
	}
}
</style>
<style>
.gantt_task_line.gantt_task_inline_color .gantt_task_progress {
	background-color: rgba(54, 54, 54, 0.2) !important;
	opacity: 1;
}

.gantt_task .gantt_task_scale .gantt_scale_cell {
	color: #333;
	font-weight: bold;
}

.container .gantt_grid_head_cell {
	font-weight: bold;
}

.gantt_grid_data .gantt_row.odd:hover,
.gantt_grid_data .gantt_row:hover,
.gantt_grid_data .gantt_row.gantt_selected,
.gantt_grid_data .gantt_row.odd.gantt_selected,
.gantt_task_row.gantt_selected {
	background-color: #f3f6fb;
}

.gantt_cell {
	padding-left: 0;
	padding-right: 0;
}

.tag-progress {
	position: absolute;
	right: -16px;
	top: -16px;
	height: 40px;
	line-height: 40px;
	font-size: 14px;
	border-radius: 0px 0px 0 26px;
	padding-left: 17px;
	border: 0;
}
</style>
<style lang="scss" scoped>
::v-deep .el-select,
::v-deep .el-date-editor.el-input,
::v-deep .el-date-editor.el-input__inner {
	width: 100%;
}

::v-deep .el-input-number--medium {
	width: 100% !important;
}

::v-deep .el-input-number.is-controls-right .el-input__inner {
	text-align: left;
}
</style>